(function() {

    const arrOpts = [
        {},
        {
            type: 'triangle',
            easing: 'easeOutQuart',
            size: 6,
            particlesAmountCoefficient: 4,
            oscillationCoefficient: 2
        },
        {
            type: 'rectangle',
            duration: 500,
            easing: 'easeOutQuad',
            color: '#091388',
            direction: 'top',
            size: 8
        },
        {
            direction: 'right',
            size: 4,
            speed: 1,
            color: '#e85577',
            particlesAmountCoefficient: 1.5,
            oscillationCoefficient: 1
        },
        {
            duration: 1300,
            easing: 'easeInExpo',
            size: 3,
            speed: 1,
            particlesAmountCoefficient: 10,
            oscillationCoefficient: 1
        },
        {
            direction: 'bottom',
            duration: 1000,
            easing: 'easeInExpo',
        },
        {
            type: 'rectangle',
            style: 'stroke',
            size: 15,
            color: '#e87084',
            duration: 600,
            easing: [0.2,1,0.7,1],
            oscillationCoefficient: 5,
            particlesAmountCoefficient: 2,
            direction: 'right'
        },
        {
            type: 'triangle',
            style: 'stroke',
            direction: 'top',
            size: 5,
            color: 'blue',
            duration: 1400,
            speed: 1.5,
            oscillationCoefficient: 15,
            direction: 'right'
        },
        {
            duration: 500,
            easing: 'easeOutQuad',
            speed: .1,
            particlesAmountCoefficient: 10,
            oscillationCoefficient: 80
        },
        {
            direction: 'right',
            size: 4,
            color: '#969696',
            duration: 1200,
            easing: 'easeInCubic',
            particlesAmountCoefficient: 8,
            speed: 0.4,
            oscillationCoefficient: 1
        },
        {
            style: 'stroke',
            color: '#1b81ea',
            direction: 'bottom',
            duration: 1200,
            easing: 'easeOutSine',
            speed: .7,
            oscillationCoefficient: 5
        },
        {
            type: 'triangle',
            easing: 'easeOutSine',
            size: 3,
            duration: 800,
            particlesAmountCoefficient: 7,
            speed: 3,
            oscillationCoefficient: 1
        }
    ];
    const inType = [false, false, false, false];
    const endWord = '<h1>“保持快乐</h1><span > 无论遇到什么困难，都要坚持试试，因为你的梦想值得你去追求。</span><br /><br /><span>若是有一天你发现世界与你背道而驰，</span><br /><br /><span>可以回来做个“铁匠”，	</span><br /><br /><span>有可能，你的世界会回到那个快乐的世界。</span><br /><br /><span>嗯，定好了，要结婚了，跟师傅说一声。</span><br /><br /><span style="position:absolute;right:10%;">--刘海波</span> ';
    function itypeFinish() {
        if (inType[0] && inType[1] && inType[2] && inType[3]) {
            var options = {
                strings: ["<h1>“保持快乐</h1>",
                    "<h1>无论遇到什么困难，都要坚持试试，因为你的梦想值得你去追求。</h1>",
                    "<h1>若是有一天你发现世界与你背道而驰，</h1>",
                    "<h1>可以回来“圣魂村”做个“铁匠”，</h1>",
                    "<h1>有可能，你的世界会回到那个快乐的世界。</h1>",
                    "<h1>嗯，定好了，要结婚了，跟师傅说一声</h1>"],
                typeSpeed: 100,
                backSpeed: 25,
                loop: false,
                resetCallback: function () { foo(); },
                
            }

            var typed = new Typed('#typed', options);
            $('.jq22').fireworks({
                sound: false, // sound effect
                opacity: 0.2,
                width: '100%',
               // height: '100%'
            });
            setTimeout(function () {
                document.getElementById('typed-strings').innerHTML = endWord;
                document.getElementById('typed').style.display = "none";
                document.getElementById('typed-strings').classList.add('visible');
                
            },24000)
        } 
    }
    function foo() {
        alert(1)
    }
    //便利所有的呃按钮
    const items = document.querySelectorAll('.grid__item');
    items.forEach((el, pos) => {
        // 获取输入框标签
        const bttn = el.querySelector('input.particles-button');
        // 获取效果撤销按钮
        const bttnBack = el.querySelector('button.action');
        // 绑定特效参数
        let particlesOpts = arrOpts[1];
        particlesOpts.complete = () => {
            // 播放完成后移除撤销动画按钮
            if ( !buttonVisible ) {
                anime.remove(bttnBack);
                anime({
                    targets: bttnBack,
                    duration: 300,
                    easing: 'easeOutQuint',
                    opacity: 1,
                    scale: [0,1]
                });
                bttnBack.style.pointerEvents = 'auto';

            }
        };
        const particles = new Particles(bttn, particlesOpts);
        // 效果状态，true已经播放完成
        let buttonVisible = true;
        
        bttn.addEventListener('input', (obj) => {
            var inputId = obj.srcElement.id;
            switch (inputId) {
                case "word-b":
                    if (document.getElementById(inputId).value != "保") { inType[0] = true; return false }
                    inType[0] = true;
                    itypeFinish();
                    break;
                case "word-c":
                    if (document.getElementById(inputId).value != "持") { inType[1] = true; return false }
                    inType[1] = true;
                    itypeFinish();

                    break;
                case "word-k":
                    if (document.getElementById(inputId).value != "快") { inType[2] = true; return false }
                    inType[2] = true;
                    itypeFinish();

                    break;
                case "word-l":
                    if (document.getElementById(inputId).value != "乐") { inType[3] = true; return false }
                    inType[3] = true;
                    itypeFinish();

                    break;
                case "word-e":
                    if (document.getElementById(inputId).value != "嗯") { return false }


                    document.getElementById('actionH1').innerText = "我们开始吧";

                    setTimeout(function () {
                        document.getElementById('firstH1').style.display = "none";

                        document.getElementById('contentBox').classList.add('visible');
                    },2000)
                    

                    break;
            }
            
            if (!particles.isAnimating() && buttonVisible) {
                
                particles.disintegrate();
                buttonVisible = !buttonVisible;
            }
        });
        bttnBack.addEventListener('click', () => {
          
            if ( !particles.isAnimating() && !buttonVisible ) {
                anime.remove(bttnBack);
                anime({
                    targets: bttnBack,
                    duration: 300,
                    easing: 'easeOutQuint',
                    opacity: 0,
                    scale: 0
                });
                bttnBack.style.pointerEvents = 'none';

                particles.integrate({
                    duration: 800,
                    easing: 'easeOutSine'
                });
                buttonVisible = !buttonVisible;
            }
        });
    });
    
})();
